<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身运动登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: #f8f8f8;
            font-family: "Microsoft YaHei", sans-serif;
            background: #f5f7fa;
            overflow: hidden;
        }

        .background-decoration {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .circle {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(45deg, #e1e8f5, #f5f7fa);
        }

        .circle:nth-child(1) {
            width: 200px;
            height: 200px;
            top: -100px;
            left: -50px;
        }

        .circle:nth-child(2) {
            width: 150px;
            height: 150px;
            bottom: -50px;
            right: -50px;
            background: linear-gradient(45deg, #f0f4fa, #e6edf7);
        }

        .dots {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.3;
        }

        .dot {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4a90e2;
        }

        .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 85%;
            max-width: 400px;
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo svg {
            width: 60px;
            height: 60px;
            fill: #4a90e2;
        }

        .input-group {
            margin-bottom: 20px;
            position: relative;
        }

        .input-group input {
            width: 100%;
            padding: 12px 15px;
            padding-left: 40px;
            border: 1px solid #e1e8f5;
            background: #fff;
            border-radius: 8px;
            font-size: 16px;
            outline: none;
            transition: all 0.3s ease;
        }

        .input-group svg {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            fill: #4a90e2;
        }

        .input-group input:focus {
            border-color: #4a90e2;
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
        }

        .login-btn {
            width: 100%;
            padding: 12px;
            background: #4a90e2;
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }

        .login-btn:hover {
            background: #357abd;
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .wave {
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 100px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%234a90e2' fill-opacity='0.1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="background-decoration">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="dots">
            <div class="dot" style="top:20%; left:30%"></div>
            <div class="dot" style="top:40%; left:70%"></div>
            <div class="dot" style="top:60%; left:20%"></div>
            <div class="dot" style="top:80%; left:60%"></div>
        </div>
        <div class="wave"></div>
    </div>

    <div class="login-container">
        <div class="logo">
            <svg viewBox="0 0 24 24">
                <path
                    d="M13.5,5.5C14.59,5.5 15.5,4.58 15.5,3.5C15.5,2.38 14.59,1.5 13.5,1.5C12.39,1.5 11.5,2.38 11.5,3.5C11.5,4.58 12.39,5.5 13.5,5.5M9.89,19.38L10.89,15L13,17V23H15V15.5L12.89,13.5L13.5,10.5C14.79,12 16.79,13 19,13V11C17.09,11 15.5,10 14.69,8.58L13.69,7C13.29,6.38 12.69,6 12,6C11.69,6 11.5,6.08 11.19,6.08L6,8.28V13H8V9.58L9.79,8.88L8.19,17L3.29,16L2.89,18L9.89,19.38Z" />
            </svg>
        </div>
        <form>
            <div class="input-group">
                <svg viewBox="0 0 24 24">
                    <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                </svg>
                <input type="text" placeholder="用户名/手机号" required>
            </div>
            <div class="input-group">
                <svg viewBox="0 0 24 24">
                    <path
                        d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" />
                </svg>
                <input type="password" placeholder="密码" required>
            </div>
            <button type="submit" class="login-btn">登 录</button>
        </form>
    </div>
</body>

</html>